<template>
  <li :class="[data.tips ? '_comment-itemTips _comment-item' : '_comment-item']">
    <div class="frTips" v-if="data.tips">{{ data.tips }}</div>
    <div v-if="data.type === 1 || data.isReward" class="_comment-item__avatar">
      <img :src="data.avatar || defaultLogo" />
    </div>
    <!-- 评论是文字 -->
    <div v-if="data.type === 1" class="_comment-item__content">
      <span v-if="isAdmin(data.source)" class="_comment-item__admin"
        :style="{ background: data.v === 2 ? 'rgb(246, 198, 89)' : 'linear-gradient(135deg, #1374f6 0%, #6eaafa 100%)' }">
        <template v-if="data.v === 1">固定马甲</template><template v-if="data.v === 2">随机马甲</template><template
          v-if="!data.v">管理员</template>
      </span>
      <span class="_comment-item__tag" v-for="tag in data.tagNames" :key="tag.tagId"
        :style="{ color: tag.tagTextColor, backgroundColor: tag.tagBg }">{{
    tag.name
  }}</span>
      <span class="_comment-item__nickname">
        {{ data.username }}
      </span>
      <span class="_comment-item__detail">
        ：<a v-if="data.replyUsername">@{{ data.replyUsername }}</a>
        {{ data.content }}
      </span>
    </div>
    <!-- 评论是打赏 -->
    <div v-if="data.isReward" class="_comment-item__content _comment-item__content-gift">
      <span v-if="isAdmin(data.source)" class="_comment-item__admin">
        {{ 管理员 }}
      </span>
      <span class="_comment-item__nickname">
        {{ data.nickname }}
      </span>
      <span class="_comment-item__detail">
        送了一个{{ data.giftName }}
        <span class="_comment-item__gift-img">
          <img v-if="data.picture" :src="data.picture" alt="gift" />
        </span>
      </span>
    </div>
  </li>
</template>

<script>
import liveSetting from '@/mixins/liveSetting'

import { mapState } from 'vuex'

import { SourceEnum, } from '@/static/tim.js';

export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  mixins: [liveSetting],
  data() {
    return {
      defaultLogo: 'https://weilebo-img.oss-cn-hangzhou.aliyuncs.com/vlebo/logo.png',
      redVisible: false,
      redDetailData: {}
    }
  },
  computed: {
    ...mapState({
      user(state) {
        return state.user
      }
    })
  },
  methods: {
    isAdmin(source) {
      return source === SourceEnum.B || source === SourceEnum.Android || source === SourceEnum.Ios;
    },
    unclaimedMinusone(data) {
      this.$emit('unclaimedMinusone', data)
    },
  }
}
</script>

<style lang="scss" scoped>
.frTips {
  width: 260px;
  padding: 6px 9px;
  font-size: 14px;
  line-height: 20px;
  color: #8DEEF6;
  background: rgba(0, 0, 0, 0.36);
  border-radius: 6px;
}

._comment-item {
  width: fit-content;
  padding: 2px 8px 2px 2px;
  margin-top: 5px;
  overflow: hidden;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;

  &__avatar {
    float: left;
    width: 22px;
    min-width: 22px;
    height: 22px;
    margin-right: 5px;
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 50%;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

._comment-item__tag {
  display: inline-block;
  border-radius: 4px;
  padding: 2px 4px;
  margin-right: 3px;
  line-height: 1;
  font-size: 10px;
}

._comment-itemTips {
  background: transparent
}

._comment-item__content {
  overflow: hidden;
  line-height: 22px;
}

._comment-item__admin {
  display: inline-block;
  padding: 2px 4px;
  font-size: 10px;
  line-height: 1;
  margin-right: 6px;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #1374f6 0%, #6eaafa 100%);
  border-radius: 4px;
}

._comment-item__nickname {
  color: #8DEEF6;
}


._comment-item__detail {
  margin-left: 3px;
  word-break: break-all;
  word-wrap: break-word;
}



._comment-item__content-gift {
  display: flex;
  align-items: center;

  ._comment-item__detail {
    display: flex;
    align-items: center;
  }
}

._comment-item__gift-img {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-left: 4px;
  // background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
